<template>
    <!-- 新增弹出框 -->
    <el-dialog title="授权" :visible="authVisible" :modal="true" width="20%" :show-close="true"
               :destroy-on-close="true"
               :close-on-click-modal="true"
               :opened="setCheckd"
               :before-close="handleDialogClose">
        <el-tree
                :data="data"
                show-checkbox
                node-key="menu_pk"
                ref="authTree"
                :props="defaultProps"
                default-expand-all
                includeHalfChecked="true"
        >
        </el-tree>
        <span slot="footer" class="dialog-footer">
                <el-button @click="click_Close">关 闭</el-button>
                <el-button type="primary" @click="clicl_Save">保 存</el-button>
            </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "auth_tree",
        inject:['refresh'],
        props: {
            authVisible: {
                type:Boolean
            },
            auth:{
                role_pk:''
            }
        },
        data(){
            return {
                //显示菜单树
                tree_menu_list_url:'/auth/menu/tree_menu_list',
                //获取选中菜单
                auth_checkd_role_url:'/auth/menu/role_menu_checked',
                //保存角色和菜单授权信息
                save_menu_role_url: '/auth/role/saveRole' ,
                defaultProps: {
                    children: 'children',
                    label: 'menu_name'
                },
                data:[]
            }
        },
        created(){
            // this.getData();
        },
        // mounted(){
        //     this.setCheckd();
        // },
        methods:{
            //关闭窗口方法
            click_Close(){
                // this.authVisible=false;
                //刷新列表页的数据
                this.refresh();
            },
            //保存数据方法
            clicl_Save(){
                var menus_pk = '';
                //获取所有选中的节点，但是不包括半选中节点
                var checkNodes = this.$refs.authTree.getCheckedNodes(false,true);
                //获取半选中节点
                // var halfCheckNodes = this.$refs.authTree.getHalfCheckedNodes();
                var jsonArray=[];
                if (checkNodes.length>0) {
                    //将选中的节点加入到json数组中
                    for (var i = 0; i < checkNodes.length; i++) {
                        // menus_pk+=checkNodes[i].menu_pk + ",";
                        checkNodes[i].checked='1';
                        checkNodes[i].children=null;
                        jsonArray.push(checkNodes[i]);
                    }
                    this.$post(this.save_menu_role_url, {
                        role_pk: this.auth.role_pk,
                        datas: JSON.stringify(jsonArray)
                    }).then(res => {
                        this.$message({
                            type: res.code,
                            message: res.msg,
                        });
                        //关闭弹出的窗口
                        this.click_Close()
                    })
                }else {
                    this.$message({
                        type: 'error',
                        message: '请选择授权菜单',
                    });
                }
            },
            //右上角关闭事件
            handleDialogClose(){
                this.click_Close();
            },
            //选中节点时设置该节点的checked为true否则为false
            handleCheckChange(data, checked, indeterminate) {
                data.checked=checked;
                console.log(data, checked, indeterminate);
            },
            handleNodeClick(data) {
                // console.log(data);
                console.log(this.$refs.authTree.getCheckedNodes());
            },
            //查询所有菜单
            getData(role_pk){
                this.$post(this.tree_menu_list_url).then(res => {
                    if(res){
                        this.data = res;
                        this.setCheckd(role_pk);
                    }
                })
            },
            //设置选中
            setCheckd(role_pk){
                this.$post(this.auth_checkd_role_url,{role_pk: role_pk}).then(res => {
                    if(res){
                        debugger;
                        // this.$refs.authTree.setCheckedNodes(res)
                        //将半选中的节点加入到json数组中
                        if (res.length>0)
                        {
                            for (var j = 0; j < res.length; j++) {
                                // menus_pk+=checkNodes[i].menu_pk + ",";

                                this.$refs.authTree.setChecked(res[j].menu_pk,true)
                            }
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>